<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>学生信息管理系统</title>
    <!-- 引入 Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            background-color: #f8f9fa;
        }
        .hero {
            padding-top: 100px;
            text-align: center;
        }
        .btn-custom {
            margin: 10px;
        }
        /* 精美时钟样式 */
        .clock {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            font-size: 2rem;
            margin-top: 20px;
            font-weight: bold;
            border: 2px solid #ced4da;
            border-radius: 10px;
            padding: 15px 30px;
            background-color: white;
            display: inline-block;
            box-shadow: 0 2px 6px rgba(0,0,0,0.1);
        }

        /* 设置区域样式：固定在右上角导航栏内 */
        .settings-panel {
            position: absolute;
            top: 15px;
            right: 30px;
            z-index: 1000;
            background-color: transparent;
            color: white;
        }

        .settings-panel select {
            font-size: 0.9rem;
        }

        /* 明朝那些事介绍区域 */
        .introduction-section {
            margin-top: 40px;
            padding: 20px;
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 2px 6px rgba(0,0,0,0.1);
        }
    </style>
</head>
<body>

<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top position-relative">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">学生信息管理系统</a>
    </div>

    <!-- 设置面板：放置在导航栏右上角 -->
    <div class="settings-panel">
        <label for="colorSelector" class="form-label text-white">时钟颜色：</label>
        <select id="colorSelector" onchange="changeClockColor()" class="form-select form-select-sm">
            <option value="default" selected>默认</option>
            <option value="red">红色</option>
            <option value="blue">蓝色</option>
            <option value="green">绿色</option>
            <option value="purple">紫色</option>
        </select>
    </div>
</nav>

<!-- 主体内容 -->
<div class="hero">
    <h1 class="display-4 mb-4">欢迎来到学生信息管理系统</h1>

    <!-- 数字时钟 -->
    <div class="clock" id="digitalClock">--:--:--</div>

    <!-- 按钮 -->
    <div class="mt-4">
        <a href="addStudent.jsp" class="btn btn-primary btn-lg">添加学生</a>
        <a href="student?action=list" class="btn btn-success btn-lg">查看所有学生</a>
    </div>
</div>

<!-- 明朝那些事介绍 -->
<div class="container introduction-section">
    <h2>《明朝那些事儿》简介</h2>
    <p>
        《明朝那些事儿》是由当代作家当年明月（本名石悦）撰写的一部历史书籍，以轻松幽默的笔调讲述了从明朝建立到灭亡的历史故事。
        该书自2006年起在网络上连载，因其独特的叙事风格和对历史事件、人物深入浅出的解读而广受欢迎，后集结成册出版。
    </p>
    <h3>主要内容</h3>
    <ul>
        <li><strong>时间跨度：</strong>涵盖了明朝近三百年的历史，从朱元璋建立明朝开始，直到崇祯帝自缢，明朝灭亡。</li>
        <li><strong>视角独特：</strong>作者以现代人的视角来解读历史，语言通俗易懂，并且穿插了不少个人见解和幽默评述，使得历史读起来既有趣又不失深度。</li>
        <li><strong>人物刻画：</strong>书中不仅详细描述了诸如朱元璋、朱棣等重要帝王的事迹，还涉及到了许多历史上不太为人所知的人物及其背后的故事，通过细腻的描写让这些历史人物跃然纸上。</li>
        <li><strong>事件解析：</strong>对于明朝的重大事件如靖难之役、土木堡之变、嘉靖大疫等进行了详细的分析与介绍，帮助读者更好地理解当时的社会背景及政治生态。</li>
    </ul>
    <p>
        《明朝那些事儿》不仅仅是一部历史著作，它更像是一部关于人性、权力斗争以及命运转折的生动教材。通过这本书，许多人重新发现了对中国历史的兴趣，尤其是对明朝这一段复杂而又丰富多彩的历史时期有了更加深刻的认识。
    </p>
</div>

<!-- 引入 Bootstrap JS Bundle（包含 Popper） -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<!-- 动态时钟脚本 -->
<script>
    // 更新时间
    function updateClock() {
        const now = new Date();
        let hours = now.getHours().toString().padStart(2, '0');
        let minutes = now.getMinutes().toString().padStart(2, '0');
        let seconds = now.getSeconds().toString().padStart(2, '0');
        document.getElementById('digitalClock').textContent = `${hours}:${minutes}:${seconds}`;
    }

    // 页面加载时立即更新一次时间
    updateClock();
    setInterval(updateClock, 1000);

    // 改变时钟颜色
    function changeClockColor() {
        const clock = document.getElementById('digitalClock');
        const color = document.getElementById('colorSelector').value;

        switch (color) {
            case 'red':
                clock.style.color = 'red';
                clock.style.borderColor = 'red';
                break;
            case 'blue':
                clock.style.color = 'blue';
                clock.style.borderColor = 'blue';
                break;
            case 'green':
                clock.style.color = 'green';
                clock.style.borderColor = 'green';
                break;
            case 'purple':
                clock.style.color = 'purple';
                clock.style.borderColor = 'purple';
                break;
            default:
                clock.style.color = '#343a40'; // 默认颜色
                clock.style.borderColor = '#ced4da';
                break;
        }
    }

    // 初始化颜色
    window.onload = changeClockColor;
</script>

</body>
</html>